<html>
<head>
    <meta charset="UTF-8"/>
    <title>年级总成绩</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

    <script src="js/Vue/Vue.js"></script>
    <script src="js/Vue/axios.js"></script>
</head>
<body>
<div id="app">
    年级：<select  v-model="grade" @change="getGrade()">
        <option v-for='grade in grades'>{{grade}}</option>
</select>
    考试名称：<select  v-model="testType">
    <option v-for="testPaperName in testPaperNames">{{testPaperName}}</option>
</select>

    <button type="button" @click="getGradeScore">确认</button>
    <br/>

    <div id="main" style="width: 600px;height:400px;"></div>
    <script>

        var storage = window.localStorage;
        var token = storage.getItem("token");
        var refreshToken = storage.getItem("refreshToken");

        console.log(refreshToken)


        new Vue({

            el: "#app",
            data:{
                grade:"高一",
                testType:"",
                grades:["高一","高二","高三"],
                testPaperNames:[],
                schools:[],
                tatolAvgs:[]
            },
            mounted() {
                axios.get(
                    "/grade/TestType/" + this.grade, {
                        headers: {
                            "token": token,
                            "refreshToken": refreshToken
                        }
                    }
                ).then(res => {

                    if(res.data.code==200){
                        this.testPaperNames=res.data.data;
                        this.testType=res.data.data[0];
                    }

                })
            },
            methods: {
                getGrade: function(){
                    axios.get(
                        "/grade/TestType/" + this.grade, {
                            headers: {
                                "token": token,
                                "refreshToken": refreshToken
                            }
                        }
                    ).then(res => {
                        if(res.data.code==200){
                            this.testPaperNames=res.data.data;
                            this.testType=res.data.data[0];
                        }
                    })
                },
                getGradeScore:function () {

                    console.log(this.testType);
                    axios.get(
                        "/grade/gradeScore/" + this.grade+"/" +this.testType, {
                            headers: {
                                "token": token,
                                "refreshToken": refreshToken
                            }
                        }
                    ).then(res => {
                        if(res.data.code==200){
                            console.log(res.data.data)
                            // 使用刚指定的配置项和数据显示图表。
                            this.schools=res.data.data.school;
                            this.tatolAvgs=res.data.data.tatolAvg;

                            // 基于准备好的dom，初始化echarts实例
                            var myChart = echarts.init(document.getElementById('main'));

                            // 指定图表的配置项和数据
                            var option = {
                                title: {
                                    text: '各年级平均成绩对比'
                                },
                                tooltip: {},
                                legend: {
                                    data:['年级平均成绩']
                                },
                                xAxis: {
                                    data: this.schools,
                                },
                                yAxis: {},
                                series: [{
                                    name: '年级平均成绩',
                                    type: 'bar',
                                    data: this.tatolAvgs,
                                }]
                            };
                            myChart.setOption(option);
                        }
                    })

                },

            }

        })

    </script>
</div>